<!-- input groups start --> 
<section class="input-groups" id="input-groups">
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Default Input group</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add span with <code>.input-group-text</code> class <b>before</b> <code>&lt;input&gt;</code></p>
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon1">@</span>
								</div>
								<input type="text" class="form-control" placeholder="Addon to Left" aria-describedby="basic-addon1">
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group with Right Addon</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add span with <code>.input-group-text</code> class <b>after</b> <code>&lt;input&gt;</code></p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Addon To Right" aria-describedby="basic-addon2">
								<div class="input-group-append">
									<span class="input-group-text" id="basic-addon2">@example.com</span>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Addon on both side</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add span with <code>.input-group-text</code> class to <b>before &amp; after</b> <code>&lt;input&gt;</code></p>
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text">$</span>
								</div>
								<input type="text" class="form-control" placeholder="Addon On Both Side" aria-label="Amount (to the nearest dollar)">
								<div class="input-group-append">
									<span class="input-group-text">.00</span>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group addon with Icon</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon3"><i class="la la-envelope"></i></span>
								</div>
								<input type="text" class="form-control" placeholder="Addon to Left" aria-describedby="basic-addon3">
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group addon with Right Icon</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Addon To Right" aria-describedby="basic-addon4">
								<div class="input-group-append">
									<span class="input-group-text" id="basic-addon4"><i class="la la-user"></i></span>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group addon with icon both side</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text"><i class="la la-phone-square"></i></span>
								</div>
								<input type="text" class="form-control" placeholder="Addon On Both Side" aria-label="Amount (to the nearest dollar)">
								<div class="input-group-append">
									<span class="input-group-text"><i class="la la-mobile"></i></span>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group addon with Spinner</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon5"><i class="la la-spinner icon-spin"></i></span>
								</div>
								<input type="text" class="form-control" placeholder="Addon to Left" aria-describedby="basic-addon5">
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group addon with Right Spinner</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Addon To Right" aria-describedby="basic-addon6">
								<div class="input-group-append">
									<span class="input-group-text" id="basic-addon6"><i class="la la-rotate-right icon-spin"></i></span>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group addon with Spinner both side</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text"><i class="la la-circle-o-notch icon-spin"></i></span>
								</div>
								<input type="text" class="form-control" placeholder="Addon On Both Side" aria-label="Amount (to the nearest dollar)">
								<div class="input-group-append">
									<span class="input-group-text"><i class="icon-spin la la-share-alt-square"></i></span>
								</div>
							</div>						
						</fieldset>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- input groups end -->



<!-- Input Groups With Checkbox start -->
<section class="checkbox-input-group" id="input-group-checkbox">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Input group with Checkbox</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group with checkbox</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add span with <code>.input-group-text</code> class <b>before</b> <code>&lt;input&gt;</code> text and Add checkbox inside.</p>
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<div class="input-group-text">
										<div class="custom-control custom-checkbox">
											<input type="checkbox" class="custom-control-input" id="customCheck1">
											<label class="custom-control-label" for="customCheck1"></label>
										</div>
									</div>
								</div>
								<input type="text" class="form-control" placeholder="Text input with Left checkbox " aria-describedby="checkbox-addon1" />
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group with Right Addon</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add span with <code>.input-group-text</code> class <b>after</b> <code>&lt;input&gt;</code> text and Add checkbox inside.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Text input with right checkbox" aria-describedby="checkbox-addon2">
								<div class="input-group-append">
									<span class="input-group-text" id="checkbox-addon2">
										<span class="skin skin-square">
											<input type="checkbox" id="check-1" checked>
										</span>
									</span>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Addon on both side</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text ">
										<span class="skin skin-futurico">
											<input type="checkbox" id="check-2">
										</span>
									</span>
								</div>
								<input type="text" class="form-control" placeholder="Addon &amp; checkbox Both Side" aria-label="Amount (to the nearest dollar)">
								<div class="input-group-append">
									<span class="input-group-text">@example.com</span>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Input Groups With Checkbox end -->



<!-- Input Groups With Radio start -->
<section class="radio-input-group" id="input-group-radio">
	<div class="row match-height">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Input group with Radio</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group with radio</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add span with <code>.input-group-text</code> class <b>before</b> <code>&lt;input&gt;</code> text and Add radio inside.</p>
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text" id="radio-addon1">
										<span class="skin-polaris skin">
											<input type="radio" aria-label="Radio for following text input">
										</span>
									</span>
								</div>
								<input type="text" class="form-control" placeholder="Text input with Left radio" aria-describedby="radio-addon1" />
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group with Right Addon</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add span with <code>.input-group-text</code> class <b>after</b> <code>&lt;input&gt;</code> text and Add radio inside.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Text input with right radio" aria-describedby="radio-addon2">
								<div class="input-group-append">
									<span class="input-group-text skin skin-flat" id="radio-addon2">
										<input type="radio" aria-label="Radio for following text input">
									</span>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Addon on both side</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text ">
										<span class="skin skin-futurico">
											<input type="radio" checked/>
											<span></span>
										</span>
									</span>
								</div>
								<input type="text" class="form-control" placeholder="Addon &amp; radio Both Side" aria-label="Amount (to the nearest dollar)">
								<div class="input-group-append">
									<span class="input-group-text">@example.com</span>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Input Groups With Radio end -->



<!-- Switchery Input Group start -->
<section class="switchery-input-group" id="input-group-switchery">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Input group with Switchery</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group with Switchery</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add span with <code>.input-group-text</code> class <b>before</b> <code>&lt;input&gt;</code> text and Add switchery inside.</p>
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text" id="radio-addon3">
										<input type="checkbox" id="switchery" class="switchery" data-size="xs" checked/>
									</span>
								</div>
								<input type="text" class="form-control" placeholder="Input with Left switchery" aria-describedby="radio-addon3" />
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group with Right Switchery</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add span with <code>.input-group-text</code> class <b>after</b> <code>&lt;input&gt;</code> text and Add switchery inside.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Input with right switchery" aria-describedby="radio-addon4">
								<div class="input-group-append">
									<span class="input-group-text" id="radio-addon4">
										<input type="checkbox" id="switchery2" class="switchery" data-size="xs" checked/>
									</span>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group with switchery on both side</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">								
									<span class="input-group-text">
										<input type="checkbox" id="switchery3" class="switchery" data-size="xs" checked/>
									</span>
								</div>
								<input type="text" class="form-control" placeholder="Switchery On Both Side" aria-label="Amount (to the nearest dollar)">
								<div class="input-group-append">
									<span class="input-group-text">
										<input type="checkbox" id="switchery4" class="switchery" data-size="xs" checked/>
									</span>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Switchery Input Group end -->



<!--	   Input Group Sizing	 -->
<section class="sizing-input-group" id="input-group-sizing">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Input Groups Sizing</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Large Input group</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add <code>.input-group-lg</code> class to <code>.input-group</code> for Large addon.</p>
						<fieldset>
							<div class="input-group input-group-lg">
								<div class="input-group-prepend">
									<span class="input-group-text" id="sizing-addon1">@</span>
								</div>
								<input type="text" class="form-control" placeholder="Large Addon" aria-describedby="sizing-addon1">
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Default Input group</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Default Input Group addon.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Default Addon" aria-describedby="sizing-addon2">
								<div class="input-group-append">
									<span class="input-group-text" id="sizing-addon2">.00</span>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Small Input group</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add <code>.input-group-sm</code> class to <code>.input-group</code> for small addon.</p>
						<fieldset>
							<div class="input-group input-group-sm">
								<div class="input-group-prepend">								
									<span class="input-group-text" id="sizing-addon3">@example.com</span>
								</div>
								<input type="text" class="form-control" placeholder="Small Addon" aria-describedby="sizing-addon3">
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Input Group Sizing end-->



<!-- Input Group Buttons start -->
<section class="buttons-input-group" id="input-group-buttons">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Input Groups Buttons</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Button On Left</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add button inside <b>before</b> <code>&lt;input&gt;</code></p>
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<button class="btn btn-primary" type="button">Click Me!</button>
								</div>
								<input type="text" class="form-control" placeholder="Button on left" aria-describedby="button-addon1">
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Button On Right</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add button inside <b>after</b> <code>&lt;input&gt;</code></p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Button on right" aria-describedby="button-addon2">
								<div class="input-group-append">
									<button class="btn btn-primary" type="button">Go</button>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Button On Both Side</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add button inside <b>before &amp; after</b> <code>&lt;input&gt;</code></p>
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<button class="btn btn-primary" type="button">Love it!</button>
								</div>
								<input type="text" class="form-control" placeholder="Button on both side" aria-label="Amount">
								<div class="input-group-append">
									<button class="btn btn-primary" type="button">Hate it!</button>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Icon Button On Left</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add button inside <b>before</b> <code>&lt;input&gt;</code></p>
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<button class="btn btn-primary" type="button"><i class="la la-microphone"></i></button>
								</div>
								<input type="text" class="form-control" placeholder="Button on left" aria-describedby="button-addon3">
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Button On Right</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add button inside <b>after</b> <code>&lt;input&gt;</code></p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Button on right" aria-describedby="button-addon4">
								<div class="input-group-append">
									<button class="btn btn-primary" type="button"><i class="la la-pencil"></i></button>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Button On Both Side</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add button inside <b>before &amp; after</b> <code>&lt;input&gt;</code></p>
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<button class="btn btn-primary" type="button"><i class="la la-search"></i></button>
								</div>
								<input type="text" class="form-control" placeholder="Button on both side" aria-label="Amount">
								<div class="input-group-append">
									<button class="btn btn-primary" type="button">Go!</button>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Input Group Buttons end -->



<!-- Buttons with Dropdown start -->
<section class="buttons-with-dropdown" id="input-group-dropdown">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Buttons with Dropdown</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Dropdown On Left</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
										Action
									</button>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">Another action</a>
										<a class="dropdown-item" href="#">Something else here</a>
										<div role="separator" class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
								<input type="text" class="form-control" placeholder="Dropdown on left">
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Dropdown On Right</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Dropdown on right">
								<div class="input-group-append">
									<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
										Action
									</button>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">Another action</a>
										<a class="dropdown-item" href="#">Something else here</a>
										<div role="separator" class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Dropdown On Both Side</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
										<i class="la la-pencil"></i>
									</button>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">Another action</a>
										<a class="dropdown-item" href="#">Something else here</a>
										<div role="separator" class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
								<input type="text" class="form-control" placeholder="Dropdown on both side" aria-label="Amount">
								<div class="input-group-append">
									<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
										Action
									</button>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">Another action</a>
										<a class="dropdown-item" href="#">Something else here</a>
										<div role="separator" class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Buttons with Dropdown end -->



<!-- Segmented Buttons with Dropdown start -->
<section class="segmented-buttons-with-dropdown">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Segmented Buttons with Dropdown</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Segmented Button On Left</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<button type="button" class="btn btn-primary">Action</button>
									<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
										<span class="sr-only">Toggle Dropdown</span>
									</button>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">Another action</a>
										<a class="dropdown-item" href="#">Something else here</a>
										<div role="separator" class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
								<input type="text" class="form-control" placeholder="Segmented Button on left">
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Segmented Button On Right</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Segmented Button on right">
								<div class="input-group-append">
									<button type="button" class="btn btn-primary">Action</button>
									<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
										<span class="sr-only">Toggle Dropdown</span>
									</button>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">Another action</a>
										<a class="dropdown-item" href="#">Something else here</a>
										<div role="separator" class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Segmented Buttons On Both Side</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<button type="button" class="btn btn-primary">
										<i class="la la-paper-plane"></i>
									</button>
									<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
										<span class="sr-only">Toggle Dropdown</span>
									</button>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">Another action</a>
										<a class="dropdown-item" href="#">Something else here</a>
										<div role="separator" class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
								<input type="text" class="form-control" placeholder="Segmented Button on both side" aria-label="Amount">
								<div class="input-group-append">
									<button type="button" class="btn btn-primary">Action</button>
									<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
										<span class="sr-only">Toggle Dropdown</span>
									</button>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">Another action</a>
										<a class="dropdown-item" href="#">Something else here</a>
										<div role="separator" class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Segmented Buttons with Dropdown end -->



<!-- Color Options start -->
<section class="color-options" id="color-validation">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Color options</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Default Input group</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add color using <code>.bg-COLORNAME</code> class to the addon.</p>
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text bg-primary border-primary white" id="basic-addon7">@</span>
								</div>
								<input type="text" class="form-control" placeholder="Addon to Left" aria-describedby="basic-addon7">
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group with Right Addon</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add color using <code>.bg-COLORNAME</code> class to the addon.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Addon To Right" aria-describedby="basic-addon8">
								<div class="input-group-append">
									<span class="input-group-text bg-warning border-warning white" id="basic-addon8"><i class="la la-pencil"></i></span>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Addon on both side</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add color using <code>.bg-COLORNAME</code> class to the addon and input with lighten/darken color.</p>						
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text bg-success bg-darken-2 border-success white"><i class="la la-calendar"></i></span>
								</div>
								<input type="text" class="form-control bg-success border-success" placeholder="Addon On Both Side" aria-label="
								Amount (to the nearest dollar)">
								<div class="input-group-append">
									<span class="input-group-text bg-success bg-darken-2 border-success white">.00</span>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Button On Left</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<button class="btn btn-primary bg-danger border-danger" type="button">Click Me!</button>
								</div>
								<input type="text" class="form-control" placeholder="Button on left" aria-describedby="button-addon5">
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Button On Right</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Button on right" aria-describedby="button-addon6">
								<div class="input-group-append">
									<button class="btn btn-primary bg-info border-info" type="button"><i class="la la-check"></i></button>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Input group Button On Both Side</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<div class="input-group-prepend">
									<button class="btn btn-primary bg-pink border-pink bg-darken-2" type="button" ><i class="la la-shopping-cart"></i></button>
								</div>
								<input type="text" class="form-control bg-pink border-pink" placeholder="Button on both side" aria-label="Amount">
								<div class="input-group-append">
									<button class="btn btn-primary bg-pink border-pink bg-darken-2" type="button">Shopping!</button>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Color Options end -->



<!-- Bootstrap TouchSpin Spinners start -->
<section class="bootstrap-touchspin-spinners" id="touchspin">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Bootstrap TouchSpin Spinners</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Default Touchspin</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add <code>.touchspin</code> class to input to add touchspin input group.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin" value="50">
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Touchspin with Postfix</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add <code>data-bts-postfix="POSTFIX_VALUE"</code> attribute to input to add postfix to touchspin input group.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin" value="50" data-bts-postfix="%"/>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Touchspin with Prefix</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add <code>data-bts-prefix="PREFIX_VALUE"</code> attribute to input to add prefix to touchspin input group.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin" value="50" data-bts-prefix="#"/>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Min Max Value of Touchspin</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Use <code>data-bts-min="VALUE" data-bts-max="VALUE"</code> attribute to input to set min and max value of touchspin input group.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin" value="50" data-bts-min="1" data-bts-max="100"/>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Touchspin with initial Value</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add <code>data-bts-init-val="VALUE"</code> attribute attribute to set initial value for input group.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin" data-bts-init-val="20"/>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Touchspin steps</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add <code>data-bts-step="VALUE"</code> attribute for increament and decrement steps to touchspin input group.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin" value="50" data-bts-step="10"/>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Decimal Value of Touchspin</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Use <code>data-bts-decimal="VALUE"</code> attribute to use decimal value of touchspin input.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin" value="50.00" data-bts-step="0.25" data-bts-decimals="2"/>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">vertical Touchspin</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add <code>.touchspin-vertical</code> class for vertical touchspin input group.</p>
						<fieldset>
							<input type="text" class="touchspin-vertical" value="55"/>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Touchspin mousewheel Disable</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add <code>.touchspin-stop-mousewheel</code> class to diable mousewheel.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin-stop-mousewheel" value="50" />
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Change Button Class to link</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add <code>data-bts-button-down-class &amp; data-bts-button-up-class</code> attribute to change button Class.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin" value="50" data-bts-button-down-class="btn btn-link" data-bts-button-up-class="btn btn-link"/>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Touchspin With Icon</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add icon class in <code>data-bts-postfix</code> attribute to icon to postfix as well prefix.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin-stop-mousewheel" data-bts-postfix="<i class='ft-phone'></i>" value="50" />
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Touchspin Icon Button</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Use <code>data-bts-button-down-txt &amp; data-bts-button-up-txt</code> attribute to set touchspin icon button.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin" value="50.00" data-bts-button-down-txt="<i class='icon-arrow-down2'></i>" data-bts-button-up-txt="<i class='icon-arrow-up2'></i>"/>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Bootstrap TouchSpin Spinners end -->



<!-- Spinners Sizes start -->
<section class="spinners-sizes" id="spinner-sizes">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Spinners Sizes</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Large Horizontal Touchspin</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add <code>.input-group-lg</code> class to input-group.</p>
						<fieldset>
							<div class="input-group input-group-lg">
								<input type="text" class="touchspin" value="50">
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Default Horizontal Touchspin</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin" value="55"/>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Small Horizontal Touchspin</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>Add <code>.input-group-sm</code> class to input-group and add <code>.input-sm</code> class to input.</p>
						<fieldset>
							<div class="input-group input-group-sm">
								<input type="text" class="touchspin input-sm" value="60"/>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Spinners Sizes end -->



<!-- Spinners Color Options start -->
<section class="spinners-color" id="spinner-color">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Spinners Color Options</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Primary Touchspin</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>set <code>data-bts-button-down-class &amp; data-bts-button-up-class</code> attribute and add value as <code>btn btn-primary</code> for Primary color spinner.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin-color" value="50" data-bts-button-down-class="btn btn-primary" data-bts-button-up-class="btn btn-primary">
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Secondray Touchspin</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>set <code>data-bts-button-down-class &amp; data-bts-button-up-class</code> attribute and add value as <code>btn btn-secondary</code> for Primary color spinner.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin-color" value="55" data-bts-button-down-class="btn btn-secondary" data-bts-button-up-class="btn btn-secondary"/>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Success Touchspin</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>set <code>data-bts-button-down-class &amp; data-bts-button-up-class</code> attribute and add value as <code>btn btn-success</code> for Success color spinner.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin-color" value="60" data-bts-button-down-class="btn btn-success" data-bts-button-up-class="btn btn-success"/>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Danger Touchspin</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>set <code>data-bts-button-down-class &amp; data-bts-button-up-class</code> attribute and add value as <code>btn btn-danger</code> for Danger color spinner.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin-color" value="50" data-bts-button-down-class="btn btn-danger" data-bts-button-up-class="btn btn-danger">
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Info Touchspin</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>set <code>data-bts-button-down-class &amp; data-bts-button-up-class</code> attribute and add value as <code>btn btn-info</code> for Info color spinner.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin-color" value="55" data-bts-button-down-class="btn btn-info" data-bts-button-up-class="btn btn-info"/>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Warning Touchspin</h4>
				</div>
				<div class="card-body">
					<div class="card-block">
						<p>set <code>data-bts-button-down-class &amp; data-bts-button-up-class</code> attribute and add value as <code>btn btn-warning</code> for Warning color spinner.</p>
						<fieldset>
							<div class="input-group">
								<input type="text" class="touchspin-color" value="60" data-bts-button-down-class="btn btn-warning" data-bts-button-up-class="btn btn-warning"/>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Spinners Color Options end -->